<template>
  <div class="user-manager content">
    <div class="header">
      <el-form :inline="true" :model="formItem">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户ID" style="margin-left: 30px;">
          <el-input placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="最后一次登录时间" style="margin-left: 30px;">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 30px;" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="primary">新增</el-button>
      <el-button type="danger">删除</el-button>
    </div>
    <div class="table" style="background: #ffffff;">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#3C8DBC',color: '#fff'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="id" label="用户ID"></el-table-column>
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="email" label="电子邮箱"></el-table-column>
        <el-table-column prop="password" label="用户密码"></el-table-column>
        <el-table-column prop="question" label="密码问题"></el-table-column>
        <el-table-column prop="answer" label="密码答案"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="birthday" label="生日"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="loginTime" label="最后一次登录时间" width="150"></el-table-column>
        <el-table-column prop="tel" label="手机号码"></el-table-column>
        <el-table-column prop="ip" label="最后一次登录IP" width="150"></el-table-column>
        <el-table-column prop="level" label="用户等级"></el-table-column>
        <el-table-column label="操作" width="150" header-align="center">
          <template v-slot="scoped">
            <el-button type="primary" size="mini" plain>编辑</el-button>
            <el-button type="danger" size="mini" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; height: 50px;text-align: right;">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItem: {

      },
      tableData: [
        {id: '024212',name: '刘某某',email: 'liesg@163.com',password: '******',question: '您几岁了',answer: '20', sex: '男',birthday: '1956-04-04',address: '济南市',loginTime: '2022-03-12',tel: '12543658741',ip: '192.63.54.1', level: '1'},
        {id: '411252',name: '张某某',email: 'afae@qq.com',password: '******',question: '您的姓名',answer: '张', sex: '女',birthday: '1994-06-04',address: '北京市',loginTime: '2022-02-24',tel: '15125465123',ip: '192.213.2.100', level: '2'},
        {id: '354420',name: '武某某',email: 'yjtyt@123.com',password: '******',question: '您的学校',answer: '一中', sex: '男',birthday: '1998-10-04',address: '上海市',loginTime: '2022-01-22',tel: '15245335478',ip: '192.63.54.133', level: '2'},
        {id: '044232',name: '周某某',email: 'sarara@qq.com',password: '******',question: '您的父亲名称',answer: '周', sex: '男',birthday: '1979-12-04',address: '南宁市',loginTime: '2021-06-12',tel: '12543658741',ip: '119.63.54.6', level: '3'},
        {id: '234454',name: '王某某',email: 'agarga@163.com',password: '******',question: '您的学校',answer: '三中', sex: '男',birthday: '1989-06-04',address: '成都市',loginTime: '2021-05-16',tel: '12456874523',ip: '192.33.54.1', level: '1'},
        {id: '244454',name: '松某某',email: 'jujyuyuy@163.com',password: '******',question: '您几岁了',answer: '42', sex: '男',birthday: '2001-07-04',address: '武汉市',loginTime: '2021-03-24',tel: '12354766555',ip: '192.223.54.1', level: '2'},
        {id: '455574',name: '刘某某',email: 'ajtyjtyjtj@163.com',password: '******',question: '您几岁了',answer: '20', sex: '女',birthday: '2000-08-04',address: '北京市',loginTime: '2021-02-12',tel: '12543658741',ip: '192.31.54.1', level: '1'},
      ],
      value1: ''
    }
  },
  methods: {
      
  }
}
</script>
<style lang="less" scoped>
    .user-manager{
      text-align: left;
      margin: 20px;
      .header{
        padding: 20px;
        background: #ffffff;
        .el-form-item{
          margin: 0;
        }
      }
      .mids{
        margin-left: 20px;
      }
      .table{
        margin-top: 20px;
      }
    }
</style>